<template>
  <div class="">
    <h3 class="mb-20">路由</h3>
    <!-- 声明式路由导航 -->
    <div class="flex-start c-gap-12">
      <p class="font-s-14">声明式路由导航</p>
      <NuxtLink to="/route/nesting">
        <el-button>嵌套路由</el-button>
      </NuxtLink>
      <NuxtLink to="/route/13579">
        <el-button>动态路由(静态传参)</el-button>
      </NuxtLink>
      <NuxtLink :to="{
        name: 'route-id', params: {
          id: '24680'
        }, query: {
          a: 1,
          b: 2
        }
      }">
        <el-button>动态路由(动态传参)</el-button>
      </NuxtLink>
    </div>
    <!-- 编程式路由导航 -->
    <div class="flex-start mt-20">
      <p class="font-s-14 mr-12">编程式路由导航</p>
      <el-button @click="toRoute(0)">嵌套路由</el-button>
      <el-button @click="toRoute(1)">动态路由(静态传参)</el-button>
      <el-button @click="toRoute(2)">动态路由(动态传参)</el-button>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  // 在页面中使用中间件
  middleware: 'route'
})

const router = useRouter()

const toRoute = (v) => {
  switch (v) {
    case 0:
      router.push({ path: '/route/nesting' })
      break;
    case 1:
      router.push({ path: '/route/13579' })
      break;
    case 2:
      router.push({
        name: 'route-id', params: {
          id: '24680'
        }, query: {
          a: 1,
          b: 2
        }
      })
      break;
  }
}
</script>

<style lang="scss" scoped></style>